var app = {
    url : null,
    isClick : false,
    isVictory : false,
    map : {
        qipan : $('#qipan')[0],
        left : null,
        top : null,
        cont : null,
        cellWidth : null,
        cellZoomWidth : null,
        qipanWidth : null,
        qiziWidth : null,
        peripheralWidthPercent : 0.9,
        qipanWidthPercent : 0.8,
        zoom : null,
        line : 15,
        cellNum : 15 + 2
    },
    initKey : function(){
        function btnChange() {
            if ($('#btn_start').text() == '开始') {
                app.start()
            } else if ($('#btn_start').text() == '结束') {
                app.end()
            }
        }
        $('#btn_start').click(function () {
            btnChange()
        })
        $(document).keydown(function (event) {
            var key = event.keyCode
            if (key == 13) {
                btnChange()
            } else if (key == 116) {
                app.end()
            }
        })
    },
    init : function(url){
        app.map.left = document.body.clientWidth * (1 - app.map.peripheralWidthPercent * app.map.qipanWidthPercent) / 2
        app.map.top = app.map.qipan.offsetTop
        app.map.qipanWidth = document.body.clientWidth * app.map.peripheralWidthPercent * app.map.qipanWidthPercent
        app.map.cellWidth = app.map.qipan.width / (app.map.line + 1)
        app.map.cellZoomWidth = app.map.qipanWidth / (app.map.line + 1)
        app.map.qiziWidth = app.map.cellWidth * 0.75 / 2
        app.map.zoom = app.map.qipanWidth / app.map.qipan.width
        app.url = url
        app.map.qipan.lineWidth=1
        app.map.qipan.strokeStyle="red"
        app.map.cont = app.map.qipan.getContext("2d")
        app.map.cont.clearRect(0, 0, app.map.qipanWidth, app.map.qipanWidth)
        if(!app.map.cont){
            alert('浏览器不兼容')
        }
        var liney = 0
        for(i=0; i< app.map.cellNum; i++) {
            var linex = 0
            app.map.cont.moveTo(linex, liney)
            app.map.cont.lineTo(app.map.qipan.width, liney)
            app.map.cont.stroke()
            liney += app.map.cellWidth
        }
        var linex = 0
        for(i=0; i< app.map.cellNum; i++) {
            var liney = 0
            app.map.cont.moveTo(linex, liney)
            app.map.cont.lineTo(linex, app.map.qipan.width)
            app.map.cont.stroke()
            linex += app.map.cellWidth
        }
        app.map.cont.beginPath()
        $('#btn_start').text('开始')
        $('#msg').text('')
        app.map.qipan.onclick = function (e) {
            var clickX = e.clientX
            var clickY = e.clientY
            console.log(clickX, clickY)
            var scopeX = (clickX-app.map.left) % app.map.cellZoomWidth
            var cellX = parseInt((clickX-app.map.left) / app.map.zoom / app.map.cellWidth)
            if(scopeX <= 10 || scopeX >= app.map.cellZoomWidth * 0.4){
                if(scopeX >= app.map.cellZoomWidth * 0.4) {
                    cellX += 1
                }
            }
            var scopeY = (clickY-app.map.top) % app.map.cellZoomWidth
            var cellY = parseInt((clickY-app.map.top) / app.map.zoom / app.map.cellWidth)
            if(scopeY <= 10 || scopeY >= app.map.cellZoomWidth * 0.4){
                if(scopeY >= app.map.cellZoomWidth * 0.4) {
                    cellY += 1
                }
            }
            if(app.isClick){
                app.isClick = false
                app.down(cellX, cellY)
            }
        }
    },
    start : function () {
        $.post(app.url + '/start')
        app.isClick = true
        app.isVictory = false
        $('#btn_start').text('结束')
    },
    down : function (cellX, cellY) {
        var url = app.url + '/down'
        var body = new URLSearchParams()
        body.append('cellX', cellX)
        body.append('cellY', cellY)
        axios.post(url + '/down', body).then(
            function successCallback (res) {
                var robotDown = res.data
                console.log(robotDown)
                var robotCellX = robotDown.cellX
                var robotCellY = robotDown.cellY
                if(robotCellX != null && robotCellY != null){
                    app.downCell(cellX, cellY, 'user')
                    app.downCell(robotCellX, robotCellY, 'robot')
                    var victory = robotDown.victory
                    if(victory){
                        app.isVictory = true
                        $('#msg').text('游戏结束 ： ' + victory + ' 赢了！')
                        setTimeout("app.init(app.url)", 4000)
                    } else {
                        app.isClick = true
                    }
                } else {
                    app.isClick = true
                }
            },
            function errorCallback(res) {
                console.log(res)
            })
        /*
        var down = {
            "cellX" : cellX,
            "cellY" : cellY
        }
        $.ajax({
            type:'post',
            url:url,
            data:down,
            success: function (robotDown) {
                console.log(robotDown)
                var robotCellX = robotDown.cellX
                var robotCellY = robotDown.cellY
                if(robotCellX != null && robotCellY != null){
                    app.downCell(cellX, cellY, 'user')
                    app.downCell(robotCellX, robotCellY, 'robot')
                    var victory = robotDown.victory
                    if(victory){
                        app.isVictory = true
                        $('#msg').text('游戏结束 ： ' + victory + ' 赢了！')
                        setTimeout("app.init(app.url)", 4000)
                    } else {
                        app.isClick = true
                    }
                } else {
                    app.isClick = true
                }
            },
            error:function (info) {
                console.log(info)
            },
            dataType: 'json'
        })*/
    },
    downCell : function (cellX, cellY, user) {
        if(cellX > 0 && cellX <= app.map.line && cellY > 0 && cellY <= app.map.line) {
            if (user == 'user') {
                app.map.cont.fillStyle = '#000'
            } else if (user == 'robot') {
                app.map.cont.fillStyle = '#fff'
            }
            app.map.cont.arc(cellX * app.map.cellWidth, cellY * app.map.cellWidth, app.map.qiziWidth, 0, 2 * Math.PI, true)
            app.map.cont.fill()
            app.map.cont.beginPath()
        } else {
            console.log('没错，这就是个 bug ，很任性吧 ！！！')
        }
    },
    end : function () {
        if(confirm('确定退出吗？')){
            $.post(app.url + '/end')
            app.init(app.url)
        }
    }
}